<template>
    <div class="detail-wrapper">
        <Block>
            <Title :detailData="detailData"></Title>
        </Block>
        <Block>
            <el-tabs v-model="activeName">
                <el-tab-pane v-for="item in tabList" :key="item.label" :label="item.label" :name="item.label">
                    <component :is="item.value" v-if="item.label === activeName" :detailData="detailData" />
                </el-tab-pane>
            </el-tabs>
        </Block>
    </div>
</template>
<script setup lang="ts">
import Title from './components/detail/Title.vue';
import BaseInfo from './components/detail/baseInfo/Index.vue';
import Device from './components/detail/device/Index.vue';
import Message from './components/detail/message/Index.vue';
import { ElMessage } from 'element-plus';
import { IoTTaskService } from '@great/services';
import { useRoute, useRouter } from 'vue-router';
import { Block } from '@great/components';
import { useCurrentTab } from '@great/components';

const tab = useCurrentTab();
const route = useRoute();
const router = useRouter();
const detailData = ref();
const tabList = computed(() => {
    return [
        {
            label: '基本信息',
            value: markRaw(BaseInfo)
        },
        {
            label: '设备',
            value: markRaw(Device)
        },
        {
            label: '消息订阅',
            value: markRaw(Message)
        }
    ];
});

const activeName = ref(tabList.value[0].label);

// 获取详情
const getDetail = async () => {
    if (route.params.id) {
        const res = await IoTTaskService.getDetail(route.params.id as string);
        detailData.value = res.data;
        activeName.value = tabList.value[0].label;

        tab.setTitle(`${tab.getRawTitle()}-${res.data.jobName}`);
    } else {
        ElMessage({
            message: '路由参数不存在',
            type: 'warning',
            onClose: () => {
                router.push('/IoT/task/list');
            }
        });
    }
};
// 初始化
const init = () => {
    getDetail();
};
init();

// 任务详情
provide('tasktDetail', detailData);
provide('initDetail', init);
</script>
<style scoped lang="scss">
.detail-wrapper {
}
</style>
